<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="searchForm" :model="searchForm" inline size="small">
        <el-form-item label="名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="resetForm('searchForm')"
            >重置</el-button
          >
          <el-button icon="el-icon-search" type="primary" @click="getList"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="addBank"
        style="margin-bottom: 10px"
        >新增</el-button
      >
      <el-button
        icon="el-icon-delete"
        size="small"
        @click="bathDelete"
        style="margin-bottom: 10px"
        >批量删除</el-button
      >
      <el-table
        v-loading="loading"
        :data="tableData.data"
        @selection-change="selectTableList"
        border
        style="width: 100%"
      >
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column
          align="center"
          prop="id"
          label="ID"
          width="80"
        ></el-table-column>

        <el-table-column align="center" label="银行图标">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.pic"
              :src="scope.row.pic"
              style="width: 80px; height: 80px"
            />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="银行名称"
        ></el-table-column>
        <el-table-column align="center" prop="code" label="银行英文简称">
          <template slot-scope="scope">
            <div>{{ scope.row.type == 1 ? scope.row.code : "-" }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="type" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">银行</span>
            <span v-else>金融机构</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag
              size="small"
              :type="scope.row.status == 0 ? 'danger' : 'success'"
              >{{ scope.row.status == 0 ? "停用" : "启用" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="创建时间"
        ></el-table-column>
        <el-table-column align="center" label="操作 ">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
              >编辑</el-button
            >
            <el-button size="mini" type="text" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pageRight"
        :current-page="searchForm.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <el-dialog
        :visible.sync="dialogVisible"
        :title="detailInfo.id ? '编辑银行' : '新增银行'"
        @close="handleClose"
        width="700px"
      >
        <el-form
          ref="form"
          size="small"
          :rules="detailRule"
          :model="detailInfo"
          label-width="120px"
        >
          <el-form-item label="银行名称" prop="name">
            <el-input maxlength="20" v-model="detailInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="银行图标" prop="pic">
            <single-upload
              uploadType="4"
              @uploadSucces="uploadSucces"
              v-model="detailInfo.pic"
            >
              <div class="uploadPic" v-if="!detailInfo.pic">
                <i
                  style="font-size: 40px; color: #ccc; font-weight: bold"
                  class="el-icon-plus"
                ></i>
              </div>
            </single-upload>
            <div>注：请上传400x400像素的图片</div>
          </el-form-item>
          <el-form-item label="背景图片">
            <single-upload
              uploadType="4"
              v-model="detailInfo.backdrop"
            >
              <div class="uploadPic" v-if="!detailInfo.backdrop">
                <i
                  style="font-size: 40px; color: #ccc; font-weight: bold"
                  class="el-icon-plus"
                ></i>
              </div>
            </single-upload>
            <div>注：请上传400x400像素的图片</div>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-radio-group v-model="detailInfo.type">
              <el-radio :label="1">银行</el-radio>
              <el-radio :label="2">金融机构</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="银行英文简称"
            prop="code"
            v-if="detailInfo.type == 1"
          >
            <el-input maxlength="20" v-model="detailInfo.code"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="detailInfo.status">
              <el-radio :label="0">停用</el-radio>
              <el-radio :label="1">正常</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('')">提交</el-button>
            <el-button @click="handleClose()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getBankList,
  addBank,
  editBank,
  deleteBank,
  deleteBankBatch
} from "@/api/bank";
import SingleUpload from "@/components/Upload/uploadOne";
export default {
  components: {
    SingleUpload
  },
  data() {
    return {
      searchForm: {
        name: "",
        pageNum: 1,
        pageSize: 10
      },
      tableData: {
        data: [],
        total: 0
      },
      loading: false,
      detailInfo: {
        name: "",
        pic: "",
        code: "",
        type: 1,
        status: 0
      },
      dialogVisible: false,
      detailRule: {
        name: [{ required: true, message: "请输入银行名称", trigger: "blur" }],
        pic: [{ required: true, message: "请上传银行图标", trigger: "blur" }],
        code: [
          { required: true, message: "请输入银行英文简称", trigger: "blur" }
        ]
      },
      selectList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    selectTableList(val) {
      this.deleteList = val.map(v => v.id);
    },

    handleUpdate(row) {
      this.dialogVisible = true;
      if (row) {
        this.detailInfo = Object.assign({}, row);
      }
    },
    submitForm(form) {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.detailInfo.id) {
            editBank(this.detailInfo).then(res => {
              this.$message({
                message: "编辑成功",
                type: "success"
              });
              this.resetdetailForm();
              this.getList();
            });
          } else {
            addBank(this.detailInfo).then(res => {
              this.$message({
                message: "新增成功",
                type: "success"
              });

              this.resetdetailForm();
              this.getList();
            });
          }
        }
      });
    },
    resetdetailForm() {
      const detailInfo = {
        type: 1,
        status: 0
      };
      this.$set(this, "detailInfo", detailInfo);
      this.$refs.form.resetFields();
      this.dialogVisible = false;
    },
    uploadSucces() {
      this.$refs.form.validateField("pic");
    },
    handleClose() {
      this.resetdetailForm();
      this.dialogVisible = false;
    },
    addBank() {
      this.dialogVisible = true;
    },
    handleDelete(row) {
      this.$confirm("确认删除？", "是否确认删除？")
        .then(() => {
          return deleteBank(row.id);
        })
        .then(() => {
          this.getList();
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    bathDelete() {
      if (this.deleteList.length == 0) {
        this.$message.error("请选择删除项");
      } else {
        this.$confirm("确认删除？", "是否确认删除？")
          .then(() => {
            return deleteBankBatch(this.deleteList.join(","));
          })
          .then(() => {
            this.getList();
            this.$message.success("删除成功");
          })
          .catch(() => {});
      }
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    resetForm() {
      this.searchForm = {
        name: "",
        pageNum: 1,
        pageSize: 10
      };
      this.getList();
    },
    getList() {
      this.loading = true;
      getBankList(this.searchForm)
        .then(res => {
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
}
.uploadPic {
  width: 90px;
  height: 90px;

  background: #eeeeee;
  border-radius: 8px;
  position: relative;
  > i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
